<template>
    <div class="container">
        <div class="handle-box">
                <el-form ref="form" :model="form" label-width="120px" class="flex">
                    <el-form-item label="兑换物品：">
                        <el-input v-model="name" placeholder="请输入兑换物品名称" class="handle-input mr10" @input="mohu()"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="addvialog()">新增</el-button>
                    </el-form-item>
                    
                </el-form>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            >
                <el-table-column prop="EX_RULE_ID" label="ID" width="55" align="center"></el-table-column>
                <!-- <el-table-column prop="name" label="名称">可回收垃圾兑换</el-table-column> -->
                <el-table-column label="兑换物品">
                    <template slot-scope="scope">{{scope.row.EX_NAME}}</template>
                </el-table-column>
                <!-- <el-table-column prop="TYPE_NAME" label="兑换类型"></el-table-column> -->
                <el-table-column prop="EX_POINTS" label="兑换积分"></el-table-column>
                <el-table-column prop="ISUSE" label="是否可用">
                    <template slot-scope="scope">
                       {{ scope.row.ISUSE ? '可用' : '不可用' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            @click="handdelete(scope.$index, scope.row)"
                            style="color:red"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-dialogDrag title="编辑积分" :visible.sync="editVisible" width="50%">
               <el-form ref="aditform" :model="aditform" label-width="70px" class="flex">
                    <el-form-item label="兑换物品类型ID：" :label-width="labelswidth"  class="wid50">
                        <!-- <el-input v-model="aditform.EXTYPE_ID"></el-input> -->
                        <el-select v-model="aditform.EXTYPE_ID" placeholder="请选择" @change="changevalue">
                          <el-option v-for="item in rulesoptions" :key='item.EXTYPE_ID' :label="item.EXTYPE_NAME" :value="item.EXTYPE_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="兑换物品名称：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="aditform.EX_NAME"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换积分：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="aditform.EX_POINTS" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="是否可用" :label-width="labelswidth"  class="wid50">
                        <el-select v-model="aditform.ISUSE" placeholder="请选择">
                          <el-option v-for="item in isuseOpts" :key='item.value' :label="item.text" :value="item.value" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveeditform">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 新增弹出框 -->
            <el-dialog v-dialogDrag title="新增积分" :visible.sync="addeditVisible" width="50%">
                <el-form ref="addform" :model="addform" label-width="70px" class="flex">
                    <el-form-item label="兑换物品类型ID：" :label-width="labelswidth" class="wid50">
                        <!-- <el-input v-model="addform.EXTYPE_ID"></el-input> -->
                        <el-select v-model="addform.EXTYPE_ID" placeholder="请选择" @change="changevalue">
                          <el-option v-for="item in rulesoptions" :key='item.EXTYPE_ID' :label="item.EXTYPE_NAME" :value="item.EXTYPE_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="兑换物品名称：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.EX_NAME"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换积分：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.EX_POINTS" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addeditVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit(addform)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
    data(){
        return{
              currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                userList: [],
                address:'',
                name:'',
                addform:{},
                aditform: {},
                labelswidth:'160px',
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {
                name: ''
            },
            idx: -1,
            id: -1,
            addeditVisible:false,
            isuseOpts: [{
                text: '可用',
                value: true
            }, {
                text: '不可用',
                value: false
            }]
        }
    },
    created() {
        this.getrules();
        this.getselect()
    },
    methods: {
        async getrules(){
            const { data } =await this.$axios.get(this.$iurl+'/GetConsumptionPointsRuleApi');
            // console.log(data)
            this.tableData = data.filter(item => {
                // console.log(item);
                const { data } =this.$axios.get(this.$url+'/GetExchangeTypeApi');
                // console.log(data)
                return item 
            })
            // console.log(data)
        },
        async getselect(){
            const { data } = await this.$axios.get(this.$url+'/GetExchangeTypeApi');
            this.rulesoptions = data.filter(item =>{
                return item
            })
        },
        addvialog(){
            this.addeditVisible = true
        },
        //搜索
        search(){
            var search = this.name;
            var newdate = [];
            if(search){
                this.tableData.filter(item => {
                    if(item.EX_NAME.indexOf(search) != -1){
                        newdate.push(item)
                    }
                })
            }else{ 
                this.getrules()
            }
            this.tableData = newdate
        },
        // 模糊查询
        mohu() {
            var search = this.name;
            var newdate = [];
            if(search){
                this.tableData.filter(item => {
                    if(item.EX_NAME.indexOf(search) != -1){
                        newdate.push(item)
                    }
                })
            }else{ 
                this.getrules()
            }
            this.tableData = newdate
        },
        // 编辑操作
        handleEdit(index, row) {
            this.aditform = Object.assign({}, row); 
            this.editVisible = true;
        },
        saveeditform(){
            let studenteList=this.aditform;
            this.$axios({
                url: this.$iurl+'/UpdateConsumptionPointsRuleApi',
                method: 'get',
                params:{
                    EX_RULE_ID: studenteList.EX_RULE_ID,
                    EXTYPE_ID: studenteList.EXTYPE_ID,
                    EX_NAME: studenteList.EX_NAME,
                    EX_POINTS: studenteList.EX_POINTS,
                    ISUSE: studenteList.ISUSE
                }
            }).then(item=>{
                if(item.data.IsSucess){
                    this.$message.success('编辑成功')
                    this.editVisible = false;
                    this.getrules()
                }
            })
        },
        // 新增操作
        saveEdit(addform) {
            // console.log(addform)
            this.$axios({
                url: this.$iurl+'/AddConsumptionPointsRuleApi',
                method: 'get',
                params: {
                    EXTYPE_ID: addform.EXTYPE_ID,
                    EX_NAME: addform.EX_NAME,
                    EX_POINTS: addform.EX_POINTS,
                    ISUSE: true
                }
            }).then(item => {
                this.$message.success('新增成功')
                this.getrules()
                this.addeditVisible = false
            })
        },
        // 删除操作
        handdelete(index,row){
            this.$confirm('确定要删除吗？','提示',{
                type: 'warning'
            }).then(()=>{
                this.$axios({
                    url: this.$iurl+ '/DeleteConsumptionPointsRuleApi',
                    method: 'get',
                    params:{
                        EX_RULE_ID: row.EX_RULE_ID
                    }
                }).then(res=>{
                    if(res.data.IsSucess){
                        this.getrules()
                    }
                })
            })            
        },
        // 分页导航
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            // this.$set(this.query, 'pageIndex', val);
            // this.getData();
        },
        handleSizeChange(size){
            this.pagesize = size;
        }
    }
}
</script>
<style scoped>
.el-select{
    width: 100%;
}
</style>